<template>
<div class="about">
  <!-- 模板中我们不需要.value, 在编译模板会自动.value -->
  <h3>count: {{count}}</h3>

  <button @click="update">增加1</button>
  <button @click="count = count + 2">增加2</button>
</div>
</template>

<script lang="ts" setup>
  import { ref } from "vue";

  console.log('setup', this) // undefined
  // 产生一个ref响应式数据, 指定数据的初始值
  // 内部的value属性存储数据, 只要更新了value, 组件就会自动更新
  const count = ref<number>(2)  
  console.log(count)

  // 更新数据的函数 => 相关于以前的method
  const update = () => {
    count.value += 1
  }
</script>
